<template>
  <div class="find">
    <div class="head">
      <van-search v-model="value" placeholder="请输入作品名,创作人"  @focus="$router.push({path:'/viewdiscovery'})"/>
    </div>
    <div class="banner">
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
        @change="onChange"
      >
        <van-swipe-item v-for="banner in banners" :key="banner.id">
          <img :src="banner.cover" />
        </van-swipe-item>

        <template #indicator>
          <div class="custom-indicator">
            {{ current + 1 }}/<span>{{ banners ? banners.length : "" }}</span>
          </div>
        </template>
      </van-swipe>
    </div>
    <div class="navigate">
      <ul>
        <li v-for="(nav,index) in navigation" :key="index" @click="getCreator(nav)">
          <div class="nav-img"><img :src="nav.icon" alt=""></div>
          <div class="nav-title"><span>{{nav.title}}</span></div>
        </li>
      </ul>
    </div>
    <div class="production">
      <div class="production-title">
        <div class="products">作品</div>
        <div class="more">全部作品</div>
      </div>
      <ul>
        <li v-for="product in production" :key="product.id" @click="getNoteId(product)">
          <img :src="product.cover" alt="">
          <span>{{product.category_name}}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Search } from "vant";
import { Swipe, SwipeItem } from "vant";
import { mapMutations} from 'vuex';
import { Toast } from "vant";
Vue.use(Swipe);
Vue.use(SwipeItem);

Vue.use(Search);
export default {
  data() {
    return {
      value: "",
      current: 0,
      banners: null,
      navigation: null,
      production:null,
    };
  },
  methods: {
    onChange(index) {
      this.current = index;
    },
    ...mapMutations(["upDataProduct"]),
    getNoteId(child){
      console.log("works",child.id);
      this.upDataProduct({upProduct:child})
        this.$router.push({ path: "/works",query:{child:child} })

     
    },
      getCreator(nav){
     
        this.$router.push({ path: "/creator",query:{nav} })
        console.log(nav);
     
    },
  },
  created: function () {
        Toast({
      message: "请稍后",
      icon: "https://img01.yzcdn.cn/vant/logo.png",
      duration: 0,
    });
    this.axios
      .get("https://apis.netstart.cn/xpc/page/discovery")
      .then((res) => {
        // console.log(res.data.data);
        this.banners = res.data.data.banners;
        this.navigation = res.data.data.recommended_position;
        this.production=res.data.data.categories
        console.log( this.production);
         Toast.clear();
      });
  },
};
</script>

<style lang="less" scoped>
.find {
  padding-bottom: 48px;
  .head {
    border-bottom: 1px solid rgba(202, 199, 199, 0.445);
  }
  .banner {
   
    margin: 10px;
    .my-swipe {
      .van-swipe-item {
        color: #fff;
        font-size: 20px;

        text-align: center;
        background-color: #39a9ed;
        border-radius: 10px;
        img {
          width: 100%;
          display: block;
          border-radius: 10px;
        }
      }
    }

    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      color: white;
      font-size: 16px;

      span {
        font-size: 12px;
      }
    }
  }
  .navigate{
    ul{
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 6rem;
      margin: 10px 0;
       padding: 16px 0;
      li{
        display: flex;
        width: 25%;
        height: 100%;
        flex-wrap: wrap;
        justify-content: space-around;
        .nav-img{
         width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          // background: red;
          margin-bottom: 10px;
          position: relative;
            &::after{
            content: '';
            position: absolute;
            top: -4px;
            right: 26.5px;
            width: 42px;
            height: 42px;
         
            z-index: -1;
            border-radius: 50%;
            box-shadow: 0 0 6px 2px rgba(223, 218, 218, 0.397);

            }
          img{
            width: 30px;
            height: 34px;
            position: relative;
          
          }
          
        }
        .nav-title{
          font-size: 14px;
          color: #333;
        }
      }
    }
  }
  .production{
    .production-title{
      display: flex;
      justify-content: space-between;
      margin:  10px;
      .products{
        font-weight: 600;
      }
      .more{
        font-size: 14px;
        color: red;
      }
    }
    ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      li{
        width: 44%;
        margin: 11px ;
        box-sizing: border-box;
        position: relative;
        img{
          width: 100%;
          border-radius: 10px;
        }
        span{
          position: absolute;
          top: 10px;
          left: 10px;
          color: white;
          font-weight: 500;
        }
      }
    }
  }
}
</style>